{% extends 'baykeshop/base_site.html' %}

{% load i18n %}

{% block title %}登录{% endblock %}


{% block container %}

    <div class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center" style="min-height: 800px;">
        <div class="box p-6 login-box">
            <p class="subtitle has-text-centered">
            {% block login_title %}登录{% endblock %}
            </p>
            <h1 class="title is-size-3 has-text-centered">baykeShop</h1>
            <div class="dropdown-divider"></div>
            
            {% block form %}
            <form action="" method="post">
              {% if form.errors and not form.non_field_errors %}
              <article class="message is-danger">
                <div class="message-body">
                  {% if form.errors.items|length == 1 %}{% translate "Please correct the error below." %}{% else %}{% translate "Please correct the errors below." %}{% endif %}
                </div>
              </article>
              {% endif %}
              
              {% if form.non_field_errors %}
              <article class="message is-danger">
                <div class="message-body">
                  {% for error in form.non_field_errors %}
                  <p> {{ error }}</p>
                  {% endfor %}
                </div>
              </article>
              {% endif %}
              {% csrf_token %}
              <div class="field">
                <p class="control has-icons-left has-icons-right">
                  {{ form.username }}
                  <span class="icon is-small is-left">
                    <i class="mdi mdi-account"></i>
                  </span>
                  <span class="icon is-small is-right">
                    <i class="mdi mdi-check"></i>
                  </span>
                </p>
              </div>
              <div class="field">
                <p class="control has-icons-left">
                  {{ form.password }}
                  <span class="icon is-small is-left">
                    <i class="mdi mdi-lock"></i>
                  </span>
                </p>
              </div>
              <div class="field">
                <p class="control">
                  <a href="{% url 'baykeshop:register' %}" class="is-size-7">还没有账号？立即注册！</a>
                </p>
              </div>
              <div class="field">
                <p class="control">
                  <input class="button is-primary is-fullwidth" type="submit" value="登录">
                </p>
              </div>
            </form>
            {% endblock %}
        </div>
    </div>
{% endblock %}